<!-- 关卡 -->
<template>
  <div class="app-container">
    <div class="btns">
      <k-button class="top-btn" value="添加" @click.native="addBoxDialog" />
    </div>

    <!--表格相关 -->
    <el-table
      :data="itemDataInfo"
      fit
      row-key="id"
      highlight-current
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="activityTheme" min-width="100px" label="档位名称" align="center" show-overflow-tooltip />
      <el-table-column prop="stage" min-width="100px" label="阶段" align="center" show-overflow-tooltip />
      <el-table-column prop="toConfirmCount" min-width="150px" label="开启次数" align="center" />
      <el-table-column prop="ranking" min-width="150px" label="排名" align="center" />
      <el-table-column min-width="120px" label="操作" align="center">
        <template v-if="!scope.row.userId" slot-scope="scope">
          <k-button class="table-btn" value="修改" @click.native="post(scope.row)" />
          <k-button class="table-btn" value="排名设置" @click.native="SetRanking(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加排名信息弹窗 -->
    <k-dialog
      :show-hide.sync="addBoxShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      :title="title"
      :show-foot="false"
      :two-btn="true"
      :close-fun="handleCloseDialog"
      @click="saveBoxDataEvent"
    >
      <div class="dialog-giveBabySetting">
        <div style="padding:20px;margin-left:50px">
          <el-form ref="loginForm" :model="rankingDataFoem" label-width="auto">
            <el-form-item
              label="阶段："
              prop="stage"
              :rules="[
                { required: true, message: '阶段不能为空'},
              ]"
            >
              <el-input v-model="rankingDataFoem.stage" onkeyup="value=value.replace(/[^0-9]/g,'')" show-word-limit placeholder="请输入阶段" />
            </el-form-item>
            <el-form-item
              label="排名："
              prop="ranking"
              :rules="[
                { required: true, message: '排名不能为空'},
              ]"
            >
              <el-input v-model="rankingDataFoem.ranking" onkeyup="value=value.replace(/[^0-9]/g,'')" show-word-limit placeholder="请输入排名" />
            </el-form-item>
            <el-form-item
              label="开启次数："
              prop="toConfirmCount"
              :rules="[
                { required: true, message: '开启次数不能为空'},
              ]"
            >
              <el-input v-model="rankingDataFoem.toConfirmCount" onkeyup="value=value.replace(/[^0-9]/g,'')" show-word-limit placeholder="请输入开启次数" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { getListData, saveListData, updateListData, deleteListData } from '@/api/levelActivity/index.js'
export default {
  data() {
    return {
      itemDataInfo: [],
      // 弹框
      title: '',
      addBoxShow: false,
      rankingDataFoem: {
        activityId: '',
        activityTheme: '',
        id: '',
        stage: '',
        toConfirmCount: '',
        ranking: ''
      },
      // 玩法介绍
      ruleGuide: {
        showHide: false
      },
      ruleGuideContent: {
        content: ''
      },
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          // 富文本初始化
          'emoji-toolbar': true,
          'emoji-shortname': true,
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'], // 上传图片、上传视频
            ['emoji']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },

  mounted() {
    this.getItemData()
  },

  methods: {

    plusGiveBabyChange(value) {
      this.checkedplusBabyList = value
    },

    getItemData(id = this.$route.query.id) {
      getListData({ id }).then(res => {
        this.itemDataInfo = res.data.rows
      })
    },
    // 修改
    post(item) {
      this.title = '修改'
      this.rankingDataFoem = { ...item }
      console.log('this.rankingDataFoem: ', this.rankingDataFoem)
      this.addBoxShow = true
    },
    // 删除
    async Delete(id) {
      try {
        await deleteListData({ id })
        this.$message.success('删除成功')
        this.getItemData()
      } catch (error) {
        console.error('error: ', error)
      }
    },
    // 排名配置
    SetRanking(id) {
      this.$router.push({
        path: '/Ranking-management-new',
        query: { id }
      })
    },

    // 开启
    addBoxDialog() {
      this.title = '添加'
      this.$resetForm(this.rankingDataFoem)
      this.addBoxShow = true
      this.$refs.loginForm.resetFields()
      Object.assign(this.$data.rankingDataFoem, this.$options.data().rankingDataFoem)
    },

    // 保存
    saveBoxDataEvent() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const param = { ...this.rankingDataFoem }
          if (param.activityId) {
            updateListData(param).then((result) => {
              if (!result.data.success) {
                this.$message.success(result.data.msg)
                return
              }
              this.$message.success(result.data.msg)
              this.handleCloseDialog()
              this.getItemData()
            })
          } else {
            param.activityId = this.$route.query.id
            saveListData(param).then((result) => {
              if (!result.data.success) {
                this.$message.success(result.data.msg)
                return
              }
              this.$message.success(result.data.msg)
              this.handleCloseDialog()
              this.getItemData()
            })
          }
        }
      })
    },

    // 关闭
    handleCloseDialog() {
      this.addBoxShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.addBox-dialog {
	::v-deep .el-dialog__body {
		width: 678px;
		padding: 10px 30px 30px 30px;
	}
	::v-deep .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
		font-size: 40px;
	}
	::v-deep .el-select .el-select__tags > span {
		display: none;
	}
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;
		::v-deep .el-tag__close {
			color: $mainColor;
		}
		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.give-dialog {
	::v-deep .el-dialog__body {
		width: 678px;
		text-align: center;
	}
	.give_div {
		margin: 0 auto;
		padding: 50px 0px;
		height: 400px;
	}
}
.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.room-type,
	.user-status,
	.account-status {
		margin-right: 20px;
	}
}
.btns {
	position: relative;
	height: 50px;
	margin-bottom: 30px;
	.el_switch_top {
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.cell-baby {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.ellipsis-span {
	width: 100px;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.editer {
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 440px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}
</style>
